<template>
  <div>
    <div class="hd1">
      <i class="el-icon-star-on"></i>
      {{ this.title }}
    </div>
    <!-- <ul class="artist-ul">
      <li
        class="artist-li"
        v-for="item in homeartist"
        @click="toArtist(item.id)"
      >
        <img :src="item.picUrl" alt="" />
        <p>{{ item.name }}</p>
      </li>
    </ul> -->
    <ul class="artist-ul">
      <li
        class="artist-li"
        v-for="(item, index) in hotartist"
        v-if="index <= 9"
        @click="toArtist(item.id)"
      >
        <img :src="item.picUrl" alt="" />
        <p>{{ item.name }}</p>
      </li>
    </ul>
    <ul class="homeartist">
      <li
        v-for="(items, index) in hoeartist"
        @click="toArtist(items.id)"
        v-if="index >= 10"
      >
        {{ items.name }}
        <i class="el-icon-s-custom"></i>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import { gethotartist } from "@/network/discover.js";
export default {
  name: "artistcat",

  data() {
    return {
      id: this.$route.query.id,
      hotartist: [],
      hoeartist: [],
      title: "",
      //   type: 1,
      //   area: 7,
    };
  },
  methods:{
  // toArtist(id) {
  //   this.$router.push("/artistdetail?id=" + id);
  // }
  },
  created() {
    axios({
      url: "http://localhost:3000/artist/list",
      params: {
        type: this.id % 1000,
        area: 7,
        limit: 100,
      },
    }).then((res) => {
      console.log(res);
      this.hotartist = res.data.artists;
      this.hoeartist = res.data.artists;

      console.log(this.hoeartist);
      if (this.id == 1001) {
        this.title = "华语男歌手";
      }
      if (this.id == 1002) {
        this.title = "华语女歌手";
      }
      if (this.id == 1003) {
        this.title = "华语组合/乐队";
      }
      if (this.id == 2001) {
        this.title = "欧美男歌手";
      }
      if (this.id == 2002) {
        this.title = "欧美组合/乐队";
      }
      if (this.id == 2003) {
        this.title = "欧美组合/乐队";
      }
    });
  },
};
</script>

<style>
</style>